<template>
	<view class="address">
		<view class="topLine"></view>
		<view class="addressLi" @click="check(item)" v-for="(item,index) in addressLis" :key="index">
			<view class="" style="padding:33rpx 30rpx;">
				<view style="color:#323232;font-size: 28rpx;font-weight: bold;" class="line4 fs24C333 twoline">
					<span v-if="item.is_default == 1">默认</span> {{item.address}}
				</view>
				<view class="line1 fs24C333" style="color:#909090">
					<text style="margin-right: 20rpx;">{{item.true_name}}</text>
					<text>{{item.mob_phone}}</text>
				</view>
			</view>
			<view style="position: absolute;width: 92%;text-align: -webkit-right;overflow-x: hidden;">
				<view class="linerightbox">
				<view class="lineright" :id="index" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :style="{left: item.leftStyle + 'rpx'}">
					<view class="line1san" :class="item.leftStyle>-50||item.leftStyle>50?'':'line1san-1' " @click.stop="editAddressBtn(1,index,item)">
						<image class="editback" src="/static/images/editback.png" mode=""></image>
					</view>
					<view class="line1sanchu" @click.stop="del(item.address_id,index)">
						删除
					</view>
				</view>
			</view>
			</view>
		</view>
		<view class="addAddressbox">
			<button @click.stop="addAddress(0)" class="addAddress" type="">新增收货地址</button>
		</view>


	</view>


</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				//左滑
				delBtnWidth: 220,
				
				pickerText: '',
				key: "",
				from: 0, //0新增，1修改
				address: "",
				
				addressLis: [],
				url: '', //上一个页面的路径
				cart_id: '',
				ifcart: '',
				is_global: '',
				order_type: '',
				SpellGroup_sn: '',
				gouwujin: "",
				global_userinfo: "",
				lid: "",
				id: "",
				type: ""
			}

		},
		onLoad(e) {

			if (e.path) {
				if (e.global_userinfo) {
					this.global_userinfo = e.global_userinfo
				}
				this.url = e.path
				this.cart_id = e.cart_id
				this.ifcart = e.ifcart
				this.is_global = e.is_global
				this.order_type = e.order_type
				if (e.SpellGroup_sn) {
					this.SpellGroup_sn = e.SpellGroup_sn
				}
			}
			if (e.gouwujin) {
				this.gouwujin = e.gouwujin
			}
			if (e.lid) {
				this.lid = e.lid
			}
			if (e.type && e.id) {
				this.type = e.type
				this.id = e.id
			}
			this.key = uni.getStorageSync('key');

		},
		onShow() {
			this.$nextTick(function() {
				this.getAddressData()
			})
		},
		methods: {
			//选择地址作为发货地址
			check(item) {
				if (this.url == 'confirmation') {
					if (this.SpellGroup_sn != '') {
						uni.redirectTo({
							url: '/mall/order/confirm?cart_id=' + this.cart_id + '&ifcart=' + this.ifcart +
								'&is_global=' + this.is_global + '&order_type=' + this.order_type + '&address=' +
								encodeURIComponent(JSON.stringify(item)) + "&global_userinfo=" + this
								.global_userinfo
						})
					} else {
						uni.redirectTo({
							url: '/mall/order/confirm?cart_id=' + this.cart_id + '&ifcart=' + this.ifcart +
								'&is_global=' + this.is_global + '&order_type=' + this.order_type +
								'&SpellGroup_sn=' + this.SpellGroup_sn + '&address=' + encodeURIComponent(JSON
									.stringify(item)) + "&global_userinfo=" + this.global_userinfo
						})
					}
				}
				if (this.gouwujin != '') {
					uni.redirectTo({
						url: '/operation/point/OrderInfo?address=' + JSON.stringify(item)
					})
				}
				if (this.lid != "") {
					if (this.type == "squeegee") { //刮刮乐
						uni.redirectTo({
							url: '/operation/prize/squeegee?lid=' + this.lid + "&aid=" + item.address_id +
								"&id=" + this.id
						})
					} else if (this.type == "bigCircle") { //大转盘
						uni.redirectTo({
							url: '/operation/prize/bigCircle?lid=' + this.lid + "&aid=" + item.address_id +
								"&id=" + this.id
						})
					} else if (this.type == "nineBoxs") { //九宫格
						uni.redirectTo({
							url: '/operation/prize/nineBoxs?lid=' + this.lid + "&aid=" + item.address_id +
								"&id=" + this.id
						})
					} else { //礼品列表
						uni.redirectTo({
							url: '/operation/prize/MyPrize?lid=' + this.lid + "&aid=" + item.address_id
						})
					}

				}
			},

			//删除地址数据
			del(id,index) {
				console.log(id)
				let that = this;
				uni.showModal({
					title:'提示',
					content: '确认要删除该地址吗？',
					success: (res) => {
						if (res.confirm) {
							this.$util.request({
								url: '/mobile/index.php?act=member_address&op=address_del',
								method: 'post',
								data: {
									"key": that.key,
									"address_id": id
								},
							}).then(function(res) {
								console.log(res)
								if(res.error_code==0){
									that.addressLis.map((itm,idx)=>{
										if(index==idx){
											that.addressLis.splice(idx,1)
										}
									})
								}
							})
						}
					}
				})
			},
			//获取地址数据
			getAddressData() {
				let that = this;
				this.$util.request({
					url: '/mobile/index.php?act=member_address&op=address_list',
					method: 'post',
					data: {
						"key": that.key,
					},
				}).then(function(res) {
					that.addressLis = res.datas.address_list
					that.addressLis.forEach(item=>{
						item.leftStyle=0
						item.startX=0
						item.hiddenFlag=true
					})
				})
			},
			//编辑地址
			editAddressBtn(num, index, item) {
				var aa = JSON.stringify(item)
				uni.navigateTo({
					url: './add?editOrAdd=edit&address_info=' + aa + '&index=' + index +
						'&from=1&isdefault=' + item.is_default
				})
			},
			isCheck(index, num) {//设置默认发货地址
				let that = this;
				this.$util.request({
					url: '/mobile/index.php?act=member_address&op=default_address',
					method: 'post',
					data: {
						"key": that.key,
						"address_id": num
					},
				}).then(function(res) {
					console.log(res)
					if (res.error_code == 0) {
						that.addressLis.map((itm,idx)=>{
							if(index==idx){
								itm.is_default=1
								that.$set(that.addressLis,idx,itm)
							}else{
								itm.is_default=0
								that.$set(that.addressLis,idx,itm)
							}
						})
					}
				})
			},
			//新增地址
			addAddress(num) {
				uni.navigateTo({
					url: './add?editOrAdd=add' + '&from=' + 0
				})
			},
			// 开始移动时
			touchS({touches,currentTarget}) {
			  let index=currentTarget.id*1
			  let item=this.addressLis[index]
			  if(touches.length === 1) {
				item.startX = touches[0].clientX;
			  }
			  if(item.leftStyle === 0) {
				item.hiddenFlag = true;
			  } else {
				item.hiddenFlag = false;
				}
			},
	        touchM({ touches,currentTarget }) {
				let index=currentTarget.id*1
	        	if(touches.length === 1) {
	        		//手指移动时水平方向位置
	        		let moveX = touches[0].clientX;
	        		this.moveFunc(moveX,index);
	        	}
				this.$set(this.addressLis[index])
	        },
	        touchE({ touches,currentTarget }) {
				let index=currentTarget.id*1
				let item=this.addressLis[index]
	        	// 如果停止滑动的距离大于二分之一则直接弹出删除按钮，不然则left为0
	        	if(-item.leftStyle > (this.delBtnWidth)/2) {
	        		item.leftStyle = -this.delBtnWidth;
	        	} else {
	        		item.leftStyle = 0;
	        	}
				this.$set(this.addressLis[index])
	        },
	        moveFunc(moveX,index) {
				let item=this.addressLis[index]
	        	// 原始位置向左，leftStyle为小于0；原始位置向右，leftStyle为大于0
	        	// disX为相对最初位置的左右距离
	        	// 大于0为向右，小于0为向左
	        	let disX = moveX - item.startX;
	        	let delBtnWidth = this.delBtnWidth;
	        	let offsetNum = 0;
	        	if(-disX >= delBtnWidth && item.leftStyle === -delBtnWidth) {
	        		return;
	        	}
	        	if(item.hiddenFlag) {
	        		if(disX == 0 || disX > 0) {
	        			offsetNum = 0;
	        		} else {
	        			offsetNum = disX;
	        			if (disX <= -delBtnWidth) {
	        				//控制手指移动距离最大值为删除按钮的宽度
	        				offsetNum = -delBtnWidth;
	        			}
	        		}
	        	} else {
	        		if(disX < 0) {
	        			offsetNum = -this.delBtnWidth;
	        		} else {
	        			offsetNum = -this.delBtnWidth + disX;
	        			if(offsetNum > 0) {
	        				offsetNum = 0;
	        			}
	        		}
	        	}
	        	item.leftStyle = offsetNum;
				this.$forceUpdate();
	        }


		}
	}
</script>

<style>
	.popup-btn {
		margin-top: 10px;
	}

	.commonInput {
		width: 500upx;
		position: relative;
		top: 8upx;
		height: 50upx;
		border: 1px solid #red;
	}

	.editCommon {
		padding-left: 40upx;
		font-size: 24upx;
		color: #333;
		height: 90upx;
		line-height: 90upx;
		border-bottom: 2upx solid #f5f5f5;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.fs24C333 {
		font-size: 24upx;
		color: #333;
	}

	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}

	.topLine {
		width: 710upx;
		height: 3upx;
		margin: 0 auto;
		background-color: #f5f5f5;
	}

	.addressLi {
		width: 690rpx;
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		
		margin: 30rpx 30rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.line5 {
		width: 670upx;
	}

	.line5 image {
		width: 54upx;
		height: 54upx;
		position: relative;
		top: 20upx;
		margin-right: 10upx;
	}

	.addAddress {
		width: 640rpx;
		height: 88rpx;
		background: linear-gradient(138deg, #EA8C1E 0%, #E84A1D 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.editAddress {
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		color: #333333;
		padding: 0 20upx;
	}

	.line11 {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #909090;
	}





	.fs30 {
		/* font-size: 30upx */
		font-size: 45upx
	}

	.fs26 {
		font-size: 39upx
			/* font-size: 26upx */
	}

	.fs12 {
		font-size: 18upx
			/* font-size: 12upx */
	}

	.fs16 {
		font-size: 24upx
			/* font-size: 16upx */
	}

	.fs14 {
		font-size: 21upx
			/* font-size: 14upx */
	}

	.fs15 {
		font-size: 22.5upx
			/* font-size: 15upx */
	}

	.fs27 {
		font-size: 40.5upx
			/* font-size: 27upx */
	}

	.fs18 {
		font-size: 27upx
			/* font-size: 18upx */
	}

	.fs28 {
		font-size: 42upx
			/* font-size: 28upx */
	}

	.fs10 {
		font-size: 15upx
			/* font-size: 10upx */
	}

	.fs30 {
		font-size: 45upx
			/* font-size: 28upx */
	}

	.fs24 {
		font-size: 36upx
			/* font-size: 24upx */
	}

	.fs20 {
		font-size: 30upx
			/* font-size: 20upx */
	}

	.fs22 {
		font-size: 33upx
			/* font-size: 22upx */
	}

	.fs21 {
		font-size: 31.5upx
			/* font-size: 21upx */
	}

	.twoline {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #323232;
		
	}
	.twoline span{
		display: inline-block;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 49rpx;
		height: 25rpx;
		background: #E96A1D;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		text-align: center;
		line-height: 25rpx;
		padding:2rpx 4rpx;
		margin-right: 10rpx;
	}
	.address{
		height: 100%;
		background-color: #F7F7F7;
		/* padding-bottom: 100rpx;s */
	}
	.addAddressbox{
		width: 100%;
		height: 98rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.editback{
		width: 50rpx;
		height: 50rpx;
	}
	.line1sanchu{
		width: 200rpx;
		height: 150rpx;
		background: #E96A1D;
		border-radius: 0rpx 10rpx 10rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 150rpx;
		text-align: center;
	}
	.lineright{
		display: flex;
		justify-content: flex-end;
		width: 100%;
		height: 150rpx;
		position: absolute;
		top: 0;
	}
	.linerightbox{
		width: 134%;
		height: 150rpx;
		/* overflow-x: auto; */
		position: relative;
	}
	.line1san{
		width: 196rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.line1san-1{
		display: none;
	}
</style>
